import React, {FC, useEffect} from "react";
import BreadcrumbPath from "../../../components/BreadcrumbPath";
import {inject, observer} from "_mobx-react@6.3.1@mobx-react";
import {Link} from "react-router-dom";

const InterviewList: FC<any> = ({MobxData}) => {

    const {interviewList, getInterviewList} = MobxData;

    useEffect(() => {
        getInterviewList()
    }, []);

    const LinkStyle = {
        color: "black",
        fontSize: '16px',
        display: "flex",
        justifyContent: " space-between",
        alignItems: "center",
        width: "100%",
        height: "50px",
        padding: "0 10px",
        marginBottom: "10px",
        backgroundColor: "#fafafa",
        borderRadius: "10px",
    };

    return (
        <div>
            {/*<h1>言论广场</h1>*/}
            <BreadcrumbPath/>
            <div style={{display: "flex",}}>
                <div style={{
                    width: "75%",
                    height: "calc(100vh - 165px)",
                    overflow: "auto",
                    padding: "10px",
                    backgroundColor: "#ffffff",
                    borderRadius: "10px",
                }}>
                    {
                        interviewList.length <= 0 ?
                            <div style={{
                                width: "100%",
                                height: "100%",
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "center"
                            }}>暂无言论</div> :
                            interviewList.sort((a: any, b: any) => b.time - a.time).map((item: any, index: number) => {
                                return (
                                    <Link style={LinkStyle} to={`/main/interview/interviewDetails?id=${item._id}`}
                                          key={index}>
                                        <div>{item.title}</div>
                                        <div>{new Date(parseInt(item.time)).toLocaleString()}</div>
                                    </Link>
                                )
                            })
                    }
                </div>
                <div style={{
                    marginLeft: "10px",
                    borderRadius: "10px",
                    width: "25%",
                    height: "350px",
                    overflow: "hidden",
                    padding: "10px",
                    backgroundColor: "#ffffff"
                }}>
                    <h2>热度排行</h2>
                    {
                        interviewList.length <= 0 ?
                            <div style={{
                                width: "100%",
                                height: "100%",
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "center"
                            }}>暂无言论</div> :
                            interviewList.sort((a: any, b: any) => b.hot - a.hot).slice(0, 5).map((item: any, index: number) => {
                                return (
                                    <Link style={{...LinkStyle, justifyContent: "flex-start"}}
                                          to={`/main/interview/interviewDetails?id=${item._id}`} key={index}>
                                        <div>{index + 1}.</div>
                                        <div style={{marginLeft: "6px"}}>{item.title}</div>
                                    </Link>
                                )
                            })
                    }
                </div>
            </div>
        </div>
    );
};
export default inject('MobxData')(observer(InterviewList));